
    <div class="am-demo-page">
      <List className="calendar-list" style="backgroundColor: 'white'">
        <ListItem className="item" [extra]="_switch">
          {{ this.state.en ? 'Chinese' : '中文' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_0()">
          {{ this.state.en ? 'ngModel' : 'ngModel' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_1()">
          {{ this.state.en ? 'Select Date Range' : '选择日期区间' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_2()">
          {{ this.state.en ? 'Select DateTime Range' : '选择日期时间区间' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_3()">
          {{ this.state.en ? 'Select Date' : '选择日期' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_4()">
          {{ this.state.en ? 'Select DateTime' : '选择日期时间' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_5()">
          {{ this.state.en ? 'Select Date Range (Shortcut)' : '选择日期区间(快捷)' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_6()">
          {{ this.state.en ? 'Select DateTime Range (Shortcut)' : '选择日期时间区间(快捷)' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_7()">
          {{ this.state.en ? 'XL row size' : '大行距' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_8()">
          {{ this.state.en ? 'infinite: false' : '不无限滚动' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_9()">
          {{ this.state.en ? 'Horizontal enter' : '水平进入' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_10()">
          {{ this.state.en ? 'Selected Date Range' : '默认选择范围' }}
        </ListItem>
        <ListItem [arrow]="'horizontal'" (onClick)="onClick_11()">
          {{ this.state.en ? 'onSelect API' : 'onSelect API' }}
        </ListItem>
        <ListItem *ngIf="this.state.startDate"> Time1: {{ this.state.startDate.toLocaleString() }} </ListItem>
        <ListItem *ngIf="this.state.endDate"> Time2: {{ this.state.endDate.toLocaleString() }} </ListItem>
      </List>
      <ng-template #_switch>
        <Switch className="right" [checked]="!this.state.en" (onChange)="this.changeLanguage()"></Switch>
      </ng-template>
      <Calendar
        [(ngModel)]="this.state.date"
        [locale]="this.state.en ? 'enUS' : 'zhCN'"
        [enterDirection]="this.state.enterDirection"
        [visible]="this.state.show"
        [getDateExtra]="this.state.getDateExtra"
        [defaultDate]="this.state.now"
        [minDate]="this.state.minDate"
        [maxDate]="this.state.maxDate"
        [pickTime]="this.state.pickTime"
        [type]="this.state.type"
        [rowSize]="this.state.rowSize"
        [showShortcut]="this.state.showShortcut"
        [infinite]="this.state.infinite"
        [defaultValue]="this.state.defaultValue"
        [onSelect]="this.state.onSelect"
        (onCancel)="triggerCancel()"
        (onConfirm)="triggerConfirm($event)"
        (onSelectHasDisableDate)="triggerSelectHasDisableDate($event)"
      ></Calendar>
    </div>
  